<nz-tabset [nzSize]="'small'" nzType="card">
  <!-- 基本属性 Tab -->
  <nz-tab nzTitle="基本属性">
    <nz-card nzTitle="Block 基本信息" [nzSize]="'small'">
      <div nz-row [nzGutter]="[16, 16]">
        <!-- Block 类型 -->
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label nzRequired>Block 类型</nz-form-label>
            <nz-form-control>
              <input nz-input 
                     [(ngModel)]="editingBlock.type" 
                     placeholder="输入 block 类型"
                     (ngModelChange)="onBasicPropertyChange()" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <!-- 颜色 -->
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>颜色</nz-form-label>
            <nz-form-control>
              <input nz-input 
                     type="color"
                     [(ngModel)]="editingBlock.colour" 
                     (ngModelChange)="onBasicPropertyChange()" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <!-- 主要文本 -->
        <div nz-col [nzSpan]="24">
          <nz-form-item>
            <nz-form-label>主要文本 (Message0)</nz-form-label>
            <nz-form-control>
              <input nz-input 
                     [(ngModel)]="editingBlock.message0" 
                     placeholder="Block 显示的文本，使用 %1, %2 等作为参数占位符"
                     (ngModelChange)="onBasicPropertyChange()" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <!-- 工具提示 -->
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>工具提示</nz-form-label>
            <nz-form-control>
              <textarea nz-input 
                        [(ngModel)]="editingBlock.tooltip" 
                        placeholder="鼠标悬停时显示的提示文本"
                        (ngModelChange)="onBasicPropertyChange()"
                        rows="2"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>

        <!-- 帮助链接 -->
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>帮助链接</nz-form-label>
            <nz-form-control>
              <input nz-input 
                     [(ngModel)]="editingBlock.helpUrl" 
                     placeholder="帮助文档的 URL"
                     (ngModelChange)="onBasicPropertyChange()" />
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </nz-card>

    <!-- 连接配置 -->
    <nz-card nzTitle="连接配置" [nzSize]="'small'" style="margin-top: 16px;">
      <div nz-row [nzGutter]="[16, 16]">
        <!-- 输出连接 -->
        <div nz-col [nzSpan]="8">
          <nz-form-item>
            <nz-form-label>输出连接</nz-form-label>            <nz-form-control>
              <div style="display: flex; align-items: center; gap: 8px;">
                <nz-switch [ngModel]="!!editingBlock.output" 
                           [nzCheckedChildren]="'开'"
                           [nzUnCheckedChildren]="'关'"
                           (ngModelChange)="toggleOutput()"></nz-switch>
                <nz-select *ngIf="editingBlock.output" 
                           [(ngModel)]="editingBlock.output" 
                           (ngModelChange)="onBasicPropertyChange()"
                           style="width: 120px;">
                  <nz-option *ngFor="let type of connectionTypes" 
                             [nzValue]="type.value" 
                             [nzLabel]="type.label"></nz-option>
                </nz-select>
              </div>
            </nz-form-control>
          </nz-form-item>
        </div>

        <!-- 前置语句连接 -->
        <div nz-col [nzSpan]="8">
          <nz-form-item>
            <nz-form-label>前置语句</nz-form-label>
            <nz-form-control>
              <nz-switch [ngModel]="editingBlock.previousStatement !== null" 
                         [nzCheckedChildren]="'开'"
                         [nzUnCheckedChildren]="'关'"
                         (ngModelChange)="togglePreviousStatement()"></nz-switch>
            </nz-form-control>
          </nz-form-item>
        </div>

        <!-- 后置语句连接 -->
        <div nz-col [nzSpan]="8">
          <nz-form-item>
            <nz-form-label>后置语句</nz-form-label>
            <nz-form-control>
              <nz-switch [ngModel]="editingBlock.nextStatement !== null" 
                         [nzCheckedChildren]="'开'"
                         [nzUnCheckedChildren]="'关'"
                         (ngModelChange)="toggleNextStatement()"></nz-switch>
            </nz-form-control>
          </nz-form-item>
        </div>

        <!-- 输入内联 -->
        <div nz-col [nzSpan]="8">
          <nz-form-item>
            <nz-form-label>输入内联</nz-form-label>
            <nz-form-control>
              <nz-switch [(ngModel)]="editingBlock.inputsInline" 
                         [nzCheckedChildren]="'开'"
                         [nzUnCheckedChildren]="'关'"
                         (ngModelChange)="onBasicPropertyChange()"></nz-switch>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </nz-card>
  </nz-tab>

  <!-- 参数配置 Tab -->
  <nz-tab nzTitle="参数配置">
    <nz-card nzTitle="参数列表" [nzSize]="'small'">
      <div style="margin-bottom: 16px;">
        <button nz-button nzType="primary" (click)="addArgument()">
          <i nz-icon nzType="plus"></i>
          添加参数
        </button>
      </div>

      <div *ngFor="let arg of editingBlock.args0; let i = index" 
           style="border: 1px solid #d9d9d9; border-radius: 6px; padding: 16px; margin-bottom: 16px;">
        
        <div style="display: flex; justify-content: between; align-items: center; margin-bottom: 16px;">
          <h4 style="margin: 0;">参数 {{i + 1}}</h4>
          <button nz-button nzType="text" nzDanger (click)="removeArgument(i)">
            <i nz-icon nzType="delete"></i>
          </button>
        </div>

        <div nz-row [nzGutter]="[16, 16]">
          <!-- 参数名称 -->
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>参数名称</nz-form-label>
              <nz-form-control>
                <input nz-input 
                       [(ngModel)]="arg.name" 
                       placeholder="参数名称"
                       (ngModelChange)="emitPreview()" />
              </nz-form-control>
            </nz-form-item>
          </div>

          <!-- 参数类型 -->
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>参数类型</nz-form-label>
              <nz-form-control>
                <nz-select [(ngModel)]="arg.type" 
                           (ngModelChange)="onFieldTypeChange(i)"
                           style="width: 100%;">
                  <nz-option *ngFor="let type of fieldTypes" 
                             [nzValue]="type.value" 
                             [nzLabel]="type.label"></nz-option>
                  <nz-option *ngFor="let type of inputTypes" 
                             [nzValue]="type.value" 
                             [nzLabel]="type.label"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>

          <!-- 根据类型显示不同的配置 -->
          <div nz-col [nzSpan]="8">
            <!-- 文本输入配置 -->
            <div *ngIf="arg.type === 'field_input'">
              <nz-form-item>
                <nz-form-label>默认文本</nz-form-label>
                <nz-form-control>
                  <input nz-input 
                         [(ngModel)]="arg.text" 
                         placeholder="默认文本"
                         (ngModelChange)="emitPreview()" />
                </nz-form-control>
              </nz-form-item>
            </div>

            <!-- 数字输入配置 -->
            <div *ngIf="arg.type === 'field_number'">
              <nz-form-item>
                <nz-form-label>默认值</nz-form-label>
                <nz-form-control>
                  <nz-input-number [(ngModel)]="arg.value" 
                                   [nzMin]="arg.min || 0"
                                   [nzMax]="arg.max || 100"
                                   [nzStep]="arg.precision || 1"
                                   (ngModelChange)="emitPreview()"
                                   style="width: 100%;"></nz-input-number>
                </nz-form-control>
              </nz-form-item>
            </div>

            <!-- 值输入/语句输入连接类型 -->
            <div *ngIf="arg.type === 'input_value' || arg.type === 'input_statement'">
              <nz-form-item>
                <nz-form-label>连接类型</nz-form-label>
                <nz-form-control>
                  <nz-select [(ngModel)]="arg.check" 
                             (ngModelChange)="emitPreview()"
                             style="width: 100%;">
                    <nz-option *ngFor="let type of connectionTypes" 
                               [nzValue]="type.value" 
                               [nzLabel]="type.label"></nz-option>
                  </nz-select>
                </nz-form-control>
              </nz-form-item>
            </div>
          </div>
        </div>

        <!-- 下拉选项配置 -->
        <div *ngIf="arg.type === 'field_dropdown'" style="margin-top: 16px;">
          <nz-divider nzText="下拉选项"></nz-divider>
          <div style="margin-bottom: 8px;">
            <button nz-button nzType="dashed" nzSize="small" (click)="addDropdownOption(i)">
              <i nz-icon nzType="plus"></i>
              添加选项
            </button>
          </div>
          <div *ngFor="let option of arg.options; let j = index" 
               style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
            <input nz-input 
                   [(ngModel)]="option[0]" 
                   placeholder="显示文本"
                   (ngModelChange)="emitPreview()" 
                   style="flex: 1;" />
            <input nz-input 
                   [(ngModel)]="option[1]" 
                   placeholder="值"
                   (ngModelChange)="emitPreview()" 
                   style="flex: 1;" />
            <button nz-button nzType="text" nzDanger nzSize="small" (click)="removeDropdownOption(i, j)">
              <i nz-icon nzType="delete"></i>
            </button>
          </div>
        </div>

        <!-- 数字范围配置 -->
        <div *ngIf="arg.type === 'field_number'" style="margin-top: 16px;">
          <nz-divider nzText="数字范围"></nz-divider>
          <div nz-row [nzGutter]="[8, 8]">
            <div nz-col [nzSpan]="8">
              <nz-form-item>
                <nz-form-label>最小值</nz-form-label>
                <nz-form-control>
                  <nz-input-number [(ngModel)]="arg.min" 
                                   (ngModelChange)="emitPreview()"
                                   style="width: 100%;"></nz-input-number>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
              <nz-form-item>
                <nz-form-label>最大值</nz-form-label>
                <nz-form-control>
                  <nz-input-number [(ngModel)]="arg.max" 
                                   (ngModelChange)="emitPreview()"
                                   style="width: 100%;"></nz-input-number>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
              <nz-form-item>
                <nz-form-label>步长</nz-form-label>
                <nz-form-control>
                  <nz-input-number [(ngModel)]="arg.precision" 
                                   [nzMin]="0.1"
                                   [nzStep]="0.1"
                                   (ngModelChange)="emitPreview()"
                                   style="width: 100%;"></nz-input-number>
                </nz-form-control>
              </nz-form-item>
            </div>
          </div>
        </div>
      </div>

      <div *ngIf="!editingBlock.args0 || editingBlock.args0.length === 0" 
           style="text-align: center; color: #999; padding: 32px;">
        暂无参数，点击"添加参数"开始配置
      </div>
    </nz-card>
  </nz-tab>

  <!-- 预览和 JSON Tab -->
  <nz-tab nzTitle="预览和JSON">
    <div nz-row [nzGutter]="[16, 16]">
      <!-- Block 预览 -->
      <div nz-col [nzSpan]="12">
        <nz-card nzTitle="Block 预览" [nzSize]="'small'">
          <div style="min-height: 200px; background: #f5f5f5; border-radius: 4px; padding: 16px;">
            <app-block-item [blockDefinition]="editingBlock"></app-block-item>
          </div>
        </nz-card>
      </div>

      <!-- JSON 预览 -->
      <div nz-col [nzSpan]="12">
        <nz-card nzTitle="JSON 定义" [nzSize]="'small'">
          <pre style="background: #f5f5f5; padding: 16px; border-radius: 4px; overflow-x: auto; font-size: 12px; max-height: 400px;">{{getJsonPreview()}}</pre>
        </nz-card>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div style="margin-top: 16px; text-align: right;">
      <button nz-button (click)="resetChanges()" style="margin-right: 8px;">
        重置
      </button>
      <button nz-button nzType="primary" (click)="saveChanges()">
        保存更改
      </button>    </div>
  </nz-tab>
</nz-tabset>
